<template>
  <view class="container">
    <view class="cus-navigationStyle">
    </view>

    <view class="tabs">
      <view class="collected-house">
        <image class="house-icon" :src="baseImgUrl + 'shiyourenkou1.png'"></image>
        <view class="content-wrap">
          <view class="content">管辖区域实有人口</view>
          <view class="num">{{ zconts }}</view>
        </view>
      </view>
      <view class="collected-house uncollected-house">
        <image class="house-icon" :src="baseImgUrl + 'shiyourenkou2.png'"></image>
        <view class="content-wrap">
          <view class="content">我采集的实有人口</view>
          <view class="num">{{ wconts }}</view>
        </view>
      </view>
    </view>

    <view class="list-content">
      <!-- <view class="sub-tabs-wrap">
        <view class="sub-tabs" @click="tabClick(0)" :class="{ 'tab-active': type === 0 }">
          <view class="name">全部</view>
          <view class="name num">({{ zrkCount }})</view>
        </view>
        <view class="sub-tabs" @click="tabClick(2)" :class="{ 'tab-active': type === 2 }">
          <view class="name">常住人口</view>
          <view class="name num">({{ czrkCount }})</view>
        </view>
        <view class="sub-tabs" @click="tabClick(1)" :class="{ 'tab-active': type === 1 }">
          <view class="name">流动人口</view>
          <view class="name num">({{ ldrkCount }})</view>
        </view>
        <view class="sub-tabs" @click="tabClick(3)" :class="{ 'tab-active': type === 3 }">
          <view class="name">暂住人口</view>
          <view class="name num">({{ zzrkCount }})</view>
        </view>
      </view> -->
      <view class="search-wrap">
        <u--input placeholder="请输入姓名或者身份证号搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
          shape="circle" v-model="likeName" @change="input_change" clearable></u--input>
      </view>

      <view class="list-container">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight"
          :style="{ height: !loading && !noMore ? '100%' : '100%' }" v-if="dataSource.length">
          <view class="list-item" v-for="item in dataSource"
            :data-url="`/actual_person/actual_person_detail?fId=${item.fId}&roomName=${item.fHjdzQhnxxdz}`"
            @click="handleClickRouter">
            <view class="person-item">
              <image :src="item.fFaceUrl ? `${imgPrefix}${item.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`"
                @click="pvwImage([item.fFaceUrl ? `${imgPrefix}${item.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`])">
              </image>
              <view class="person-item-content">
                <view class="person-name">{{ item.fxName }}</view>
                <view class="person-name person-idcard">
                  <view class="label">身份证号:</view>
                  <view class="value">{{ encryptIDCard(item.fGmsfhm) }}</view>
                </view>
                <view class="person-name person-house-owner-relationship">
                  <view class="label">居住地址:</view>
                  <view class="value">{{ item.fHjdzQhnxxdz }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>

        <view v-if="!dataSource.length">
          <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon2.png'">
          </u-empty>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="submit-btn" type="primary" style="width: 100%"
        :data-url="`/actual_person/actual_person_add?type=add`" @click="handleClickRouter">
        新增实有人口
      </button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getAction,
    postAction,
  } from "@/utils/request.js";
  import {
    handleClickRouter,
    isLoading,
    pvwImage,
    encryptIDCard
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        zconts: 0, // 辖区总人数
        wconts: 0, // 采集人数
        zrkCount: 0, // 全部人数
        zzrkCount: 0, // 暂住人口总数
        czrkCount: 0, // 常住人口总数
        ldrkCount: 0, // 流动人口总数
        type: 0, // 人口类型 0 全部 1 流动人口 2 常住人口 3 暂住人口
        likeName: "", // 检索条件

        dataSource: [],
        pageBottom: false,
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        scrollTop: 0,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },
    onLoad() {},
    onShow() {
      this.scrollTop = uni.getStorageSync("scrollTop") || 0;
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
    },
    methods: {
      encryptIDCard,
      handleClickRouter,
      pvwImage,
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) this.getList();
        else this.pageBottom = true;
      },

      input_change(e) {
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      tabClick(type) {
        this.type = type;
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      async getList() {
        let data = {
          type: this.type,
          likeName: this.likeName,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };
        try {
          isLoading(true)
          const {
            result
          } = await getAction(
            `/indeed/population/populationList`,
            data
          );
          this.zconts = result.zconts; // 辖区总人数
          this.wconts = result.wconts; // 采集人数
          this.zrkCount = result.zrkCount; // 全部人数
          this.zzrkCount = result.zzrkCount; // 暂住人口总数
          this.czrkCount = result.czrkCount; // 常住人口总数
          this.ldrkCount = result.ldrkCount; // 流动人口总数
          this.dataSource = this.dataSource.concat(result.orders || []);
          this.pageConfig.total = result.total;
        } catch (error) {
          console.log("error", error);
        } finally {
          isLoading(false)
        }
      },
    },
    destroy() {
      uni.$off("person_refresh");
    },
  };
</script>

<style scoped lang="scss">
  .container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;

    .cus-navigationStyle {
      height: 123rpx;
      background: #2488f5;

      text {
        color: #ffffff;
        position: absolute;
        top: 80rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
      }
    }

    .tabs {
      position: absolute;
      top: 16rpx;
      left: 50%;
      transform: translateX(-50%);

      width: 718rpx;
      height: 160rpx;
      background: #ffffff;
      border-radius: 8rpx;

      display: flex;
      padding: 32rpx 40rpx;

      image {
        width: 96rpx;
        height: 96rpx;
        background: #2488f5;
        border-radius: 50%;
      }

      .collected-house {
        flex: 1;
        display: flex;
        border-right: 1rpx solid #d5d4d4;

        .content-wrap {
          margin-left: 16rpx;

          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .content {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #9a9a9a;
          }

          .num {
            font-family: DIN, DIN;
            font-weight: 500;
            font-size: 36rpx;
            color: #000000;
          }
        }
      }

      .uncollected-house {
        flex: 1;
        border-right: none;
        justify-content: flex-end;
      }
    }

    .list-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 12rpx;
      margin-top: 70rpx;
      background: #fff;
      min-height: 0;

      padding: 18rpx 10rpx;

      .sub-tabs-wrap {
        display: flex;

        .sub-tabs {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;

          height: 96rpx;
          background: #f4f5f7;
          border-radius: 8rpx;

          margin-right: 15rpx;

          &:nth-last-of-type(1) {
            margin-right: 0;
          }

          .name {
            font-weight: 500;
            font-size: 26rpx;
            color: #aaaaaa;
          }
        }

        .tab-active {
          background: #edf7ff;

          .name {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }

      .search-wrap {
        margin: 20rpx 0;
      }

      .list-container {
        flex: 1;
        overflow: scroll;

        .person-item {
          height: 198rpx;
          background: #f9f9f9;
          border-radius: 16rpx;
          border: 1rpx solid #f4f5f7;

          margin: 10rpx 0;
          padding: 22rpx 26rpx;

          &:nth-of-type(1) {
            margin-top: 24rpx;
          }

          display: flex;

          image {
            width: 136rpx;
            height: 144rpx;
          }

          .person-item-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 20rpx;

            .person-name {
              display: flex;

              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 30rpx;
              color: #000000;
            }

            .label {
              min-width: 120rpx;
              font-weight: 400;
              font-size: 26rpx;
              color: #a2a0a0;
            }

            .value {
              font-weight: 500;
              font-size: 26rpx;
              color: #6b6b6b;
            }
          }
        }
      }
    }

    .btns {
      margin: 0 12rpx;
    }
  }
</style>